<template>
  <div class="bg-light">
    <!-- 头部 -->
    <div class="header d-flex align-items-center">
      <router-link to="/politics" class="text-dark">
        <i class="bi bi-chevron-left fs-4"></i>
      </router-link>
      <h5 class="mb-0 mx-auto">错题本</h5>
    </div>

    <!-- 筛选区域 -->
    <div class="filter-section">
      <h6>按科目筛选</h6>
      <div class="filter-chips">
        <div
            v-for="filter in filters"
            :key="filter.id"
            class="filter-chip"
            :class="{ active: currentFilter === filter.id }"
            @click="selectFilter(filter.id)"
        >
          {{ filter.name }}
        </div>
      </div>
    </div>

    <!-- 错题列表 -->
    <router-link
        v-for="question in filteredQuestions"
        :key="question.id"
        :to="question.explanationPath"
        class="text-decoration-none"
    >
      <div class="wrong-question-card">
        <div class="chapter-info">
          <i class="bi bi-bookmark-fill"></i>
          {{question.resource}}-{{ question.chapter }}
        </div>
        <div class="question-text">
          {{ question.text }}
        </div>
        <div class="wrong-info">
          <span>错选：{{ question.wrongAnswer }}</span>
          <span>正确答案：{{ question.correctAnswer }}</span>
          <span>错误次数：{{ question.wrongCount }}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
import http from '@/router/http';
import router from "@/router/index";
import {politicsTypeDict} from "@/router/dict"

export default {
  name: 'PoliticsWrongView',
  data() {
    return {
      currentFilter: null,
      filters: politicsTypeDict,
      questions: []
    }
  },
  created() {
    this.fetchQuestions();
  },
  computed: {
    filteredQuestions() {
      if (this.currentFilter === null) {
        return this.questions
      }
      return this.questions.filter(q => q.subject === this.currentFilter)
    }
  },
  methods: {
    async fetchQuestions() {
      http.get("/student/wrongQuestion/wrongQuestionList")
          .then(response => {
            const data = response.data.response;
            this.questions = [];
            if(data!= null && data.length > 0){
              data.forEach(item => {
                this.questions.push({
                  id: item.wrongId,
                  chapter: item.questionPoliticsInfoDto.chapter,
                  text: item.questionPoliticsInfoDto.childInfo[0].qtitle,
                  wrongAnswer: item.wrongAnswer,
                  correctAnswer: item.correctAnswer,
                  wrongCount: item.numberErrors,
                  subject: item.subjectId,
                  resource: item.resource === 1? '历史真题' : '专项练习',
                  explanationPath: '/politics/wrong/explanation?year='+item.questionPoliticsInfoDto.selectedYear+'&question='+item.questionId+'&correctAnswer='+item.correctAnswer+'&userAnswer='+item.wrongAnswer.join(",")
                });
              })
            }

          })
          .catch(error => {
            console.error('获取政治真题数据失败：', error);
            router.push('/politics');
          });
    },
    selectFilter(filterId) {
      this.fetchQuestions();
      this.currentFilter = filterId

    }
  }
}
</script>

<style scoped>
body {
  background-color: #f0f9f9;
  padding-bottom: 70px;
}

.header {
  padding: 15px;
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.wrong-question-card {
  background: white;
  margin: 15px;
  padding: 20px;
  border-radius: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wrong-question-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.chapter-info {
  color: #B19CD9;
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.question-text {
  color: #333;
  margin-bottom: 15px;
  line-height: 1.6;
}

.wrong-info {
  display: flex;
  justify-content: space-between;
  color: #dc3545;
  font-size: 0.9rem;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.filter-section {
  background: white;
  margin: 15px;
  padding: 15px;
  border-radius: 15px;
}

.filter-chips {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.filter-chip {
  background: #f0f0f0;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 0.9rem;
  cursor: pointer;
}

.filter-chip.active {
  background: #B19CD9;
  color: white;
}
</style> 